<!-- src/components/Cards/MissionCard.vue -->
<template>
  <div class="mission-card" :style="cardStyle">
    <!-- 顶部按钮栏 -->
    <div class="card-header">
      <div class="header-buttons">
        <button class="header-button edit-button" @click="handleEdit" title="编辑">
          <svg class="button-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"/>
          </svg>
          <span class="button-text">编辑</span>
        </button>
        <button class="header-button delete-button" @click="handleDelete" title="删除">
          <svg class="button-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/>
          </svg>
          <span class="button-text">删除</span>
        </button>
        <button class="header-button close-button" @click="handleClose" title="关闭">
          <span class="close-icon">×</span>
        </button>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="card-content">
      <!-- 标题栏 -->
      <div class="title-section">
        <div class="section-icon title-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 任务清单图标 -->
            <path d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M7,7H17V5H19V19H5V5H7V7Z" fill="currentColor"/>
            <path d="M7,12H17V10H7V12M7,16H14V14H7V16Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <div class="card-title">{{ cardData.title }}</div>
        </div>
      </div>
      
      <!-- 任务时间栏 -->
      <div class="time-section">
        <div class="section-icon time-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="time-text">{{ formatDate(cardData.missionDate) }}</span>
        </div>
      </div>
      
      <!-- 截止时间栏（如果有截止时间） -->
      <div class="deadline-section" v-if="cardData.deadline">
        <div class="section-icon deadline-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 目标/靶心图标 -->
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="deadline-text">截止时间：{{ formatDeadlineDate(cardData.deadline) }}</span>
        </div>
      </div>
      
      <!-- 备注栏（如果remark不为空） -->
      <div class="remark-section" v-if="cardData.remark && cardData.remark.trim() !== ''">
        <div class="section-icon remark-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 便签/注释图标 -->
            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" fill="currentColor"/>
            <path d="M8,12H16V14H8V12M8,16H13V18H8V16Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="remark-text">{{ cardData.remark }}</span>
        </div>
      </div>
      
      <!-- 状态栏（可点击切换状态） -->
      <div class="status-section" @click="toggleStatus" style="cursor: pointer;">
        <div class="section-icon status-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 状态指示器图标 -->
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="status-text" :class="{ 'finished': cardData.isFinished, 'pending': !cardData.isFinished }">
            {{ cardData.isFinished ? '已完成' : '进行中' }}
          </span>
        </div>
      </div>
      
      <!-- 归属栏 -->
      <div class="owner-section">
        <div class="section-icon owner-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="owner-text">我的任务</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import type { missionCard } from '@/types/card'
import { useCardStore } from '@/store/card'

interface Props {
  cardData: missionCard
  position?: {
    x: number
    y: number
  }
}

interface Emits {
  (e: 'close'): void
  (e: 'delete', id: string): void
  (e: 'edit', card: missionCard): void
  (e: 'update:cardData', card: missionCard): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const cardStore = useCardStore()

// 计算卡片样式（包含边界检查）
const cardStyle = computed(() => {
  if (!props.position) return {}
  
  const cardWidth = 320
  // 动态计算高度，根据是否有remark和deadline
  let cardHeight = 280 // 基础高度（增加了标题和时间分离）
  if (props.cardData.remark && props.cardData.remark.trim() !== '') cardHeight += 48
  if (props.cardData.deadline) cardHeight += 48
  
  const margin = 10
  
  let adjustedX = props.position.x
  let adjustedY = props.position.y
  
  // 水平方向边界检查
  if (adjustedX + cardWidth > window.innerWidth) {
    adjustedX = window.innerWidth - cardWidth - margin
  }
  if (adjustedX < margin) {
    adjustedX = margin
  }
  
  // 垂直方向边界检查
  if (adjustedY + cardHeight > window.innerHeight) {
    adjustedY = window.innerHeight - cardHeight - margin
  }
  if (adjustedY < margin) {
    adjustedY = margin
  }
  
  return {
    left: `${adjustedX}px`,
    top: `${adjustedY}px`
  }
})

// 格式化日期显示
const formatDate = (date: Date): string => {
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 格式化截止日期显示
const formatDeadlineDate = (date: Date): string => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
  const weekDay = weekDays[date.getDay()]
  
  return `${year}年${month}月${day}日 周${weekDay}`
}

// 处理编辑
const handleEdit = () => {
  ElMessage.info('编辑功能待实现')
  emit('edit', props.cardData)
}

// 处理删除
const handleDelete = () => {
  emit('delete', props.cardData.id)
}

// 处理关闭
const handleClose = () => {
  emit('close')
}

// 切换任务状态
const toggleStatus = async () => {
  try {
    const newStatus = !props.cardData.isFinished
    const updatedCard = await cardStore.saveMCard({
      ...props.cardData,
      isFinished: newStatus,
      updatedAt: new Date()
    } as missionCard)
    
    if (updatedCard) {
      emit('update:cardData', updatedCard)
      ElMessage.success(newStatus ? '任务已标记为已完成' : '任务已标记为进行中')
    }
  } catch (error) {
    console.error('更新任务状态失败:', error)
    ElMessage.error('更新任务状态失败')
  }
}
</script>

<style scoped>
.mission-card {
  position: fixed;
  width: 320px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  z-index: 1001;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-card:hover {
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.16),
    0 4px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* 顶部按钮栏 */
.card-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.7));
  backdrop-filter: blur(8px);
}

.header-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  gap: 6px;
  min-height: 32px;
}

.header-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.close-button {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
  padding: 6px;
  min-width: 32px;
}

.close-button:hover {
  background: rgba(100, 116, 139, 0.2);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.3);
}

.edit-button {
  color: #0369a1;
  background: rgba(3, 105, 161, 0.08);
  border: 1px solid rgba(3, 105, 161, 0.2);
}

.edit-button:hover {
  background: rgba(3, 105, 161, 0.15);
  border-color: rgba(3, 105, 161, 0.3);
}

.delete-button {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.delete-button:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
}

.button-svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.header-button:hover .button-svg {
  transform: scale(1.1);
}

.button-text {
  font-size: 12px;
  font-weight: 500;
}

.close-icon {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/* 内容区域 */
.card-content {
  padding: 0;
}

/* 通用区域样式 */
.title-section,
.time-section,
.deadline-section,
.remark-section,
.status-section,
.owner-section {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  gap: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease;
}

.title-section:hover,
.time-section:hover,
.deadline-section:hover,
.remark-section:hover,
.status-section:hover,
.owner-section:hover {
  background: rgba(241, 245, 249, 0.4);
}

.title-section {
  align-items: flex-start;
}

.time-section,
.deadline-section,
.remark-section,
.status-section,
.owner-section {
  align-items: center;
}

/* 图标样式 */
.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.icon-svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.section-icon:hover .icon-svg {
  transform: scale(1.1);
}

/* 更新图标配色 */
.title-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.time-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.deadline-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.remark-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.status-icon {
  background: linear-gradient(135deg, #64748b, #475569);
  color: white;
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

.owner-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* 内容区域样式 */
.section-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.time-text,
.deadline-text,
.remark-text,
.status-text,
.owner-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
  font-weight: 500;
}

.time-text {
  background: rgba(241, 245, 249, 0.6);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  display: inline-block;
}

/* 截止时间特殊样式 */
.deadline-text {
  color: #dc2626;
  font-weight: 600;
  background: rgba(220, 38, 38, 0.08);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  display: inline-block;
}

/* 状态样式 */
.status-text {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-text.finished {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-text.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.remark-text {
  color: #475569;
  line-height: 1.5;
}

/* 最后一个区域去掉边框 */
.owner-section {
  border-bottom: none;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .mission-card {
    width: 300px;
    border-radius: 14px;
  }
  
  .card-header {
    padding: 14px 16px 10px;
  }
  
  .title-section,
  .time-section,
  .deadline-section,
  .remark-section,
  .status-section,
  .owner-section {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .section-icon {
    width: 32px;
    height: 32px;
  }
  
  .icon-svg {
    width: 16px;
    height: 16px;
  }
}
</style>